<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="name">
<input type="text" placeholder="请输入员工工资" id="salary">
<input type="text" placeholder="请输入员工岗位" id="job">
<button onclick="add()">点击添加员工</button>
<br>
<table border="1px">
    <caption>员工表</caption>
    <tr>
        <th>员工姓名</th>
        <th>员工工资</th>
        <th>员工岗位</th>
    </tr>
</table>
<script>
    //9.定义数组来保存用户输入的多个员工数据
    let arr = [];
    //1.定义函数，点击按钮式调用
    function add() {
    //2.获取用户输入的值
    let name = document.querySelector('#name').value.trim();
    let salary = document.querySelector('#salary').value.trim();
    let job = document.querySelector('#job').value.trim();
    //3.对数据进行校验
    if (!name||!salary||!job){
        alert('请输入完整的员工信息！');
        return;
    }
    console.log(name,salary,job);
    //4.每多输入一个员工，表格就对一个tr与3个td
    let trE = document.createElement('tr');
    let nameTd = document.createElement('td');
    let salaryTd = document.createElement('td');
    let jobTd = document.createElement('td');
    //5.将收集到的值存入单元格中
    nameTd.innerHTML = name;
    salaryTd.innerHTML = salary;
    jobTd.innerHTML = job;
    //6.将单元格添加到tr中
    trE.append(nameTd,salaryTd,jobTd);
    console.log(trE,nameTd,salaryTd,jobTd);
    //7.将tr添加到table中
    let tableE = document.querySelector('table');
    tableE.append(trE);
    //8.清空输入框
    document.querySelector('#name').value = '';
    document.querySelector('#salary').value = '';
    document.querySelector('#job').value = '';
    //10.将收集到的数据存入数组中
        arr.push({
                name: name,
                salary: salary,
                job: job
            });
        console.log(arr);
}
</script>
</body>
</html>